import { useNavigate, useLocation } from "react-router-dom";
import "./ResultsPage.css";

const ResultsPage = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const analysisResult = location.state?.analysisResult || {
    // 默认数据，以防没有传递结果
    symptoms: [
      { name: '严重抑郁症', level: '高匹配', severity: '非常严重', score: 85 },
      { name: '广泛性焦虑症 (GAD)', level: '高匹配', severity: '非常严重', score: 80 },
      { name: '躁郁症', level: '中等匹配', severity: '缓和', score: 55 },
      { name: '强迫症 (OCD)', level: '中等匹配', severity: '缓和', score: 50 },
      { name: '创伤后应激障碍 (PTSD)', level: '低匹配', severity: '低至轻度', score: 30 },
      { name: '社交焦虑症 (社交恐惧症)', level: '低匹配', severity: '低至轻度', score: 25 }
    ],
    patientInfo: {
      age: 26,
      gender: '女性',
      activeSymptoms: 8
    }
  };

  const handleViewResults = () => {
    // 导航到assessment视图，传递分析结果
    navigate('/AssessmentView', { state: { analysisResult } });
  };

  return (
    <div className="results-container">
      {/* Status bar */}
      <div className="status-bar">
        <span className="time">9:41</span>
        <div className="icons">
          <span className="signal">●●●●</span>
          <span className="wifi">●</span>
          <span className="battery">●</span>
        </div>
      </div>

      {/* Main content */}
      <div className="results-content">
        <div className="illustration">
          {/* SVG illustration of a person with papers */}
          <svg width="200" height="200" viewBox="0 0 200 200">
            <g transform="translate(0,10)">
              {/* Person */}
              <circle cx="100" cy="60" r="25" fill="#f9d195" /> {/* Head */}
              <path d="M85,65 Q100,80 115,65" stroke="#5a3c25" strokeWidth="2" fill="none" /> {/* Smile */}
              <rect x="85" y="85" width="30" height="50" fill="#d4e9b3" /> {/* Body/Vest */}
              <rect x="95" y="85" width="10" height="50" fill="#b3d69b" /> {/* Vest middle */}
              <circle cx="91" cy="95" r="3" fill="#5a3c25" /> {/* Button */}
              <circle cx="91" cy="110" r="3" fill="#5a3c25" /> {/* Button */}
              <circle cx="91" cy="125" r="3" fill="#5a3c25" /> {/* Button */}
              <rect x="70" y="85" width="15" height="40" fill="#f9d195" /> {/* Left arm */}
              <rect x="115" y="85" width="15" height="40" fill="#f9d195" /> {/* Right arm */}
              
              {/* Papers */}
              <g transform="rotate(-15, 65, 70)">
                <rect x="50" y="60" width="30" height="40" fill="#ffffff" stroke="#cccccc" strokeWidth="1" />
                <line x1="55" y1="70" x2="75" y2="70" stroke="#cccccc" strokeWidth="1" />
                <line x1="55" y1="75" x2="70" y2="75" stroke="#cccccc" strokeWidth="1" />
                <line x1="55" y1="80" x2="75" y2="80" stroke="#cccccc" strokeWidth="1" />
                <line x1="55" y1="85" x2="65" y2="85" stroke="#cccccc" strokeWidth="1" />
                <circle cx="58" cy="65" r="5" fill="#b3d69b" />
              </g>
              
              {/* Raised arm with paper */}
              <g transform="rotate(25, 140, 70)">
                <rect x="130" y="60" width="30" height="40" fill="#ffffff" stroke="#cccccc" strokeWidth="1" />
                <line x1="135" y1="70" x2="155" y2="70" stroke="#cccccc" strokeWidth="1" />
                <line x1="135" y1="75" x2="150" y2="75" stroke="#cccccc" strokeWidth="1" />
                <line x1="135" y1="80" x2="155" y2="80" stroke="#cccccc" strokeWidth="1" />
                <line x1="135" y1="85" x2="145" y2="85" stroke="#cccccc" strokeWidth="1" />
              </g>
              
              {/* Swirls */}
              <path d="M50,40 Q60,30 50,20" stroke="#ffffff" strokeWidth="2" fill="none" />
              <path d="M150,40 Q140,30 150,20" stroke="#ffffff" strokeWidth="2" fill="none" />
              <path d="M130,120 Q140,110 130,100" stroke="#ffffff" strokeWidth="2" fill="none" />
              <path d="M70,120 Q60,110 70,100" stroke="#ffffff" strokeWidth="2" fill="none" />
            </g>
          </svg>
        </div>
        
        <div className="results-message">
          <h2>您的结果已准备就绪。</h2>
          <p>嗨KOTO，您准备好查看症状诊断结果了吗？</p>
        </div>
        
        <button className="view-results-button" onClick={handleViewResults}>
          查看我的结果 →
        </button>
      </div>
    </div>
  );
};

export default ResultsPage;